<template>
  <div class="class-bed-manage">
    <el-button type="primary" class="add-btn" @click="isOpenClassBedManage()">添加</el-button>
    <div class="table-wrapper">
      <el-table :data="tableData" class="custom-table" border>
        <el-table-column prop="id" label="id" align="center" />
        <el-table-column prop="groupName" label="人员分组" align="center" />
        <el-table-column label="床位" align="center" width="300">
          <template #default="scope">
            {{ formatBedNumbers(scope.row.bed) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              class="action-btn"
              @click="editItem(scope.row)"
              >编辑</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              class="action-btn"
              @click="deleteItem(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800">
    <el-form :model="form">
      <el-form-item label="班次分组" :label-width="formLabelWidth">
        <el-select v-model="form.classGroupId" placeholder="请选择" style="width: 150px">
          <el-option
            v-for="group in groupList"
            :key="group.id"
            :label="group.groupName"
            :value="group.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="管床床位：" class="form-item-bed">
        <el-checkbox-group v-model="form.bed" class="bed-checkbox-group">
          <el-checkbox
            v-for="bed in bedList"
            :key="bed.id"
            :label="bed.id"
            :disabled="bed.isAssigned"
            :title="bed.isAssigned ? '该床位已被分配' : ''"
          >
            {{ bed.bedCode }}
            <el-tag v-if="bed.isAssigned" size="small" type="warning" style="margin-left: 5px"
              >已分配</el-tag
            >
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="saveClassBedManage()">
          {{ currentEditId ? '保存' : '添加' }}
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import http from '@/api/http.js'

// 人员分组数据
const groupList = ref([])
// 床位数据
const bedList = ref([])
// 管床班次列表数据
const tableData = ref([])

// 获取人员分组列表
const getGroupList = () => {
  http
    .get('api/NurseGroupController/GetNurseGroup')
    .then((res) => {
      groupList.value = res
    })
    .catch((err) => {
      console.error('获取人员分组失败:', err)
      ElMessage.error('获取人员分组失败')
    })
}

// 获取床位列表
const getBedList = () => {
  // 先获取所有床位
  http
    .get('api/BedController/GetBeds')
    .then((bedRes) => {
      if (bedRes && Array.isArray(bedRes)) {
        // 获取已分配的床位
        http
          .get('api/ClassBedManageController/GetClassBedManage')
          .then((assignedRes) => {
            // 获取所有已分配的床位ID
            const assignedBeds = new Set()
            if (Array.isArray(assignedRes)) {
              assignedRes.forEach((item) => {
                if (item.bed) {
                  item.bed.split(',').forEach((bedId) => {
                    assignedBeds.add(Number(bedId))
                  })
                }
              })
            }

            // 标记已分配的床位
            bedList.value = bedRes.map((bed) => ({
              ...bed,
              isAssigned: assignedBeds.has(Number(bed.id))
            }))
          })
          .catch((err) => {
            console.error('获取已分配床位失败:', err)
            ElMessage.error('获取已分配床位信息失败')
          })
      } else {
        console.error('床位数据格式错误')
        ElMessage.error('获取床位数据格式错误')
      }
    })
    .catch((err) => {
      console.error('获取床位列表失败:', err)
      ElMessage.error('获取床位列表失败')
    })
}

// 显示管床班次
const getClassBedManage = () => {
  http
    .get('api/ClassBedManageController/GetClassBedManage')
    .then((res) => {
      tableData.value = res
    })
    .catch((err) => {
      console.log(err)
      ElMessage.error('获取数据失败')
    })
}

//打开管床班次新增对话框
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const currentEditId = ref(null)
const dialogTitle = ref('新增管床班次')

//管床班次新增表单数据
const form = reactive({
  classGroupId: null,
  bed: []
})

// 重置表单
const resetForm = () => {
  form.bed = []
  form.classGroupId = null
  currentEditId.value = null
  dialogTitle.value = '新增管床班次'
}

// 打开对话框时重置表单
const isOpenClassBedManage = () => {
  resetForm()
  dialogFormVisible.value = true
}

// 修改保存方法以支持编辑功能
const saveClassBedManage = () => {
  if (!form.classGroupId) {
    ElMessage.warning('请选择班次分组')
    return
  }
  if (form.bed.length === 0) {
    ElMessage.warning('请选择至少一个床位')
    return
  }

  // 检查该小组是否已经分配了床位
  const existingAssignment = tableData.value.find(
    item => item.classGroupId === form.classGroupId && (!currentEditId.value || item.id !== currentEditId.value)
  )

  if (existingAssignment) {
    ElMessage.error('该小组已经分配了床位，不能重复分配')
    return
  }

  // 构造后端需要的对象
  const postData = {
    classGroupId: form.classGroupId,
    bed: form.bed.join(',') // 转成字符串
  }

  // 如果是编辑模式，添加ID
  if (currentEditId.value) {
    postData.id = currentEditId.value
  }

  // 根据是否是编辑模式选择不同的API
  const url = currentEditId.value
    ? 'api/ClassBedManageController/UpdateClassBedManage'
    : 'api/ClassBedManageController/AddClassBedManages'

  http.post(url, postData).then((res) => {
    // 修改模式下，任何非null/undefined的响应都视为成功
    // 添加模式下，需要res > 0
    const isSuccess = currentEditId.value ? res !== null && res !== undefined : res > 0
    if (isSuccess) {
      ElMessage.success(currentEditId.value ? '修改成功' : '添加成功')
      dialogFormVisible.value = false
      getClassBedManage()
      getBedList()
      resetForm()
    } else {
      ElMessage.error(currentEditId.value ? '修改失败' : '添加失败')
    }
  })
}

// 编辑项目
const editItem = (row) => {
  // 将字符串格式的床位转换为数组
  const bedArray = row.bed ? row.bed.split(',').map(Number) : []

  // 设置表单数据
  form.classGroupId = row.classGroupId
  form.bed = bedArray

  // 标记为编辑模式
  currentEditId.value = row.id
  dialogTitle.value = '编辑管床班次'

  // 重新获取床位状态，排除当前记录的床位
  http.get('api/ClassBedManageController/GetClassBedManage').then((assignedRes) => {
    const assignedBeds = new Set()
    assignedRes.forEach((item) => {
      // 跳过当前正在编辑的记录
      if (item.id !== row.id && item.bed) {
        item.bed.split(',').forEach((bedId) => {
          assignedBeds.add(Number(bedId))
        })
      }
    })

    // 更新床位状态
    bedList.value = bedList.value.map((bed) => ({
      ...bed,
      isAssigned: assignedBeds.has(bed.id)
    }))
  })
  dialogFormVisible.value = true
}

// 删除项目
const deleteItem = (row) => {
  ElMessageBox.confirm('确认删除此记录?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      http
        .get(`api/ClassBedManageController/DeleteClassBedManage?id=${row.id}`)
        .then((res) => {
          if (res == 1) {
            ElMessage.success('删除成功')
            getClassBedManage() // 刷新列表数据
          } else {
            ElMessage.error('删除失败')
          }
        })
        .catch((err) => {
          console.error('删除失败:', err)
          ElMessage.error('删除失败，请稍后重试')
        })
    })
    .catch(() => {
      // 用户取消删除操作，不需要做任何处理
    })
}

// 添加格式化床位号的方法
const formatBedNumbers = (bedString) => {
  if (!bedString) return ''

  // 将逗号分隔的字符串转为数组，转为数字，排序
  const beds = bedString
    .split(',')
    .map(Number)
    .sort((a, b) => a - b)
    .map((num) => `${num}床`)
    .join('、')

  return beds
}

// 在组件挂载时获取所有数据
onMounted(() => {
  getClassBedManage()
  getGroupList()
  getBedList()
})
</script>

<style scoped>
.class-bed-manage {
  width: 100%;
  height: 100vh;
  background: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
}

.add-btn {
  margin: 20px 0;
  width: 160px;
  height: 56px;
  font-size: 22px;
  border-radius: 10px;
  align-self: flex-end;
  margin-right: 20%;
}

.table-wrapper {
  width: 100%;  /* 设置表格容器宽度为60% */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.custom-table {
  width: 100%;
  background: #fff;
}

/* 设置表格列的宽度 */
:deep(.el-table .el-table__cell) {
  padding: 12px 0;
}

:deep(.el-table) {
  border: 1px solid #aaa;
}

/* 设置表格体的高度 */
:deep(.el-table__body-wrapper) {
  max-height: calc(100vh - 200px);  /* 设置最大高度 */
  overflow-y: auto;
}

.el-table th,
.el-table td {
  font-size: 18px !important;
  text-align: center;
}

.action-btn {
  color: #0056ff !important;
  font-size: 18px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 0 6px;
}

.el-table__header th {
  background: #fafbfc;
  font-weight: 600;
}

/* 表格边框样式 */
:deep(.el-table td),
:deep(.el-table th) {
  border: 1px solid #aaa !important;
}

/* 防止body出现滚动条 */
:global(body) {
  margin: 0;
  padding: 0;
  overflow: auto !important;  /* 允许页面滚动 */
}

/* 修改表格样式 */
.el-table {
  /* 合并边框 */
  border-collapse: collapse !important;
  border: 1px solid #aaa;
}

/* 单元格边框设置 */
.el-table td,
.el-table th {
  border-right: 1px solid #aaa !important;
  border-bottom: 1px solid #aaa !important;
}

/* 表头底部边框 */
.el-table__header {
  border-bottom: 1px solid #aaa !important;
}

/* 最后一列右边框 */
.el-table__fixed-right {
  border-left: 1px solid #aaa !important;
}

/* 床位多选框样式 */
.bed-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.bed-checkbox-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.bed-checkbox-col {
  display: flex;
  justify-content: center;
}

:deep(.el-checkbox) {
  margin-right: 0;
  height: 32px;
  display: flex;
  align-items: center;
}

:deep(.el-checkbox.is-disabled) {
  opacity: 0.7;
  cursor: not-allowed;
}

:deep(.el-checkbox.is-disabled .el-checkbox__label) {
  color: #999;
}

/* 统一表单标签宽度 */
.el-form-item {
  --label-width: 90px; /* 与formLabelWidth变量同步 */
}

/* 标签对齐 */
.el-form-item :deep(.el-form-item__label) {
  width: var(--label-width) !important;
  text-align: right;
  padding-right: 12px;
}

/* 内容区域对齐 */
.el-form-item :deep(.el-form-item__content) {
  margin-left: var(--label-width) !important;
}

/* 多选框组特殊调整 */
.form-item-bed :deep(.el-form-item__content) {
  display: flex;
  align-items: flex-start; /* 顶部对齐 */
  margin-top: 8px; /* 补偿标签高度 */
}

/* 下拉框宽度修正 */
.el-select {
  width: 150px; /* 修正之前的拼写错误 */
}

/* 已分配床位的样式 */
:deep(.el-checkbox.is-disabled) {
  opacity: 0.7;
  cursor: not-allowed;
}

:deep(.el-checkbox.is-disabled .el-checkbox__label) {
  color: #999;
}

/* 提示标签样式 */
.el-tag {
  height: 20px;
  line-height: 18px;
  padding: 0 4px;
  font-size: 12px;
}

/* 设置表格容器高度 */
:deep(.el-table) {
  height: 100% !important;
}

/* 设置表格体的高度，使其可以滚动 */
:deep(.el-table__body-wrapper) {
  height: calc(100% - 48px) !important; /* 减去表头高度 */
  overflow-y: auto !important;
}
</style>